<template>
  <!-- 在原有代码最后添加弹出层组件 -->
  <view class="cancel-popup" v-if="showCancelPopup">
    <view class="popup-mask" @tap="closeCancelPopup"></view>
    <view class="popup-content">
      <view class="popup-header">
        <text>请选择取消订单原因</text>
        <text class="close-icon" @tap="closeCancelPopup">×</text>
      </view>
      <view class="popup-body">
        <radio-group @change="handleReasonChange">
          <label
            class="reason-item"
            v-for="(item, index) in cancelReasons"
            :key="index"
          >
            <radio
              :value="item.value"
              :checked="selectedReason === item.value"
              color="#3399ff"
            />
            <text>{{ item.label }}</text>
          </label>
        </radio-group>
      </view>
      <view class="popup-footer">
        <button class="confirm-btn" @tap="confirmCancel">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
// 在原有的 script 中添加以下代码
const showCancelPopup = ref(false);
const selectedReason = ref("");
const emit = defineEmits(["readyCancel"]);
const cancelReasons = ref([
  { label: "商品重复下单/误下单了", value: "1" },
  { label: "收货地址选错了", value: "2" },
  { label: "不想买了", value: "3" },
  { label: "其他原因", value: "4" },
]);
const show = () => {
  showCancelPopup.value = true;
};
const closeCancelPopup = () => {
  showCancelPopup.value = false;
  selectedReason.value = "";
};

const handleReasonChange = (e) => {
  selectedReason.value = e.detail.value;
};

const confirmCancel = async () => {
  if (!selectedReason.value) {
    uni.showToast({
      title: "请选择取消原因",
      icon: "none",
    });
    return;
  }

  try {
    emit("readyCancel",cancelReasons.value.find(i=> i.value === selectedReason.value)?.label || '');
    closeCancelPopup();
  } catch (error) {
    uni.showToast({
      title: error.message || "取消失败",
      icon: "none",
    });
  }
};

defineExpose({
  show,
})
</script>

<style lang="scss" scoped>
// 在原有的 style 中添加以下样式
.cancel-popup {
  .popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .popup-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    z-index: 1000;

    .popup-header {
      position: relative;
      padding: 30rpx;
      text-align: center;
      font-size: 32rpx;
      border-bottom: 1px solid #eee;

      .close-icon {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 40rpx;
        color: #999;
        padding: 0 20rpx;
      }
    }

    .popup-body {
      padding: 20rpx 30rpx;
      max-height: 60vh;
      overflow-y: auto;

      .reason-item {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        radio {
          transform: scale(0.8);
          margin-right: 20rpx;
        }

        text {
          font-size: 28rpx;
          color: #333;
        }
      }
    }

    .popup-footer {
      padding: 20rpx 30rpx 40rpx;

      .confirm-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background-color: #3399ff;
        color: #fff;
        font-size: 32rpx;
        border-radius: 44rpx;
        border: none;
      }
    }
  }
}
</style>
